<template>
    <a-modal :confirm-loading="modalOption.loading" :okText="modalOption.okText" @ok="modalOption.onOk"
             @cancel="modalOption.onCancel" :cancelText="modalOption.cancelText" :width="modalOption.width" :visible="visible"
             :title="operateType == 1 ? '出库':'退库'">
        <a-spin tip="loading" :spinning="loading">
            <div class="container">
                <a-form-model ref="formModel" :label-col="formOption.labelCol" :wrapper-col="formOption.wrapperCol"
                              :layout="formOption.layout" :label-align="formOption.labelAlign" :hide-required-mark="formOption.hideRequiredMark"
                              :rules="formOption.rules" :model="formOption.formData">
                    <!-- 出库总数量和总件数 -->
                     <a-row :gutter="16">
                        <a-col :span="12">
                            <a-form-model-item label="调整类型">
                                <span>{{ operateType == 1 ? '出库':'退库' }}</span>
                            </a-form-model-item>
                        </a-col>
                     </a-row>
                    <a-row :gutter="16" v-if="operateType == 1">
                        <a-col :span="12">
                            <a-form-model-item :label="`${operateType == 1 ? '出库':'退库'}总数量(kg)`">
                                <a-input v-model="formOption.formData.outTotalNumber" disabled />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label="`${operateType == 1 ? '出库':'退库'}总件数(件)`">
                                <a-input v-model="formOption.formData.outTotalNum" disabled />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <!-- 出库时间 -->
                     <a-row :gutter="16">
                        <a-col :span="24">
                            <a-form-model-item :label="`${operateType == 1 ? '出库':'退库'}时间`" prop="outDate">
                                <a-date-picker
                                    valueFormat="YYYY-MM-DD"
                                    v-model="formOption.formData.outDate"
                                    style="width: 100%"
                                    :locale="locale"
                                    :placeholder="`请选择${operateType == 1 ? '出库':'退库'}时间`"
                                />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <!-- 出库件数，当前结存件数 -->
                     <a-row :gutter="16">
                        <a-col :span="12">
                            <a-form-model-item :label="`${operateType == 1 ? '出库':'退库'}件数(件)`" prop="outNum">
                                <a-input v-model="formOption.formData.outNum" :placeholder="`请输入${operateType == 1 ? '出库':'退库'}件数`" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="当前结存件数(件)">
                                <a-input v-model="formOption.formData.surplusNum" disabled />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <!-- 出库数量，当前结存数量 -->
                    <a-row :gutter="16">
                        <a-col :span="12">
                            <a-form-model-item :label="`${operateType == 1 ? '出库':'退库'}数量(kg)`" prop="outNumber">
                                <a-input v-model="formOption.formData.outNumber" :placeholder="`请输入${operateType == 1 ? '出库':'退库'}数量`" />
                            </a-form-model-item>
                        </a-col>
                         <a-col :span="12">
                            <a-form-model-item label="当前结存数量(kg)">
                                <a-input v-model="formOption.formData.surplusNumber" disabled />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                     <!-- 盘盈，报损 -->
                    <a-row :gutter="16" v-if="operateType == 1">
                         <a-col :span="12">
                            <a-form-model-item label="盘盈" prop="outPy">
                                <a-input v-model="formOption.formData.outPy" placeholder="请输入盘盈" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="报损" prop="outLoss">
                                <a-input v-model="formOption.formData.outLoss" placeholder="请输入报损" />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="16">
                        <a-form-model-item label="备注" prop="remark">
                                <a-textarea v-model="formOption.formData.remark" placeholder="备注" />
                            </a-form-model-item>
                    </a-row>
                    <!-- 出库明细表格 -->
                    <h3>库存调整明细</h3>
                    <a-table
                        :dataSource="outboundDetailData"
                        :columns="outboundDetailColumns"
                        :pagination="false"
                        bordered
                    >
                    </a-table>

                </a-form-model>
            </div>
        </a-spin>
         <div slot="footer">
            <a-button size="large" @click="modalOption.onCancel">取 消</a-button>
            <a-button size="large" type="primary" @click="modalOption.onOk">确 定</a-button>
        </div>
    </a-modal>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import locale from "ant-design-vue/lib/date-picker/locale/zh_CN";
import nextApi from "@/api/nextApi";

@Component({})
export default class OutStourage extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default:{} }) formData!: any;
    @Prop({ default:'' }) editId!:string;
    @Prop({default:1}) operateType!:number;
    locale = locale;
    loading = false;

    modalOption: any = {
        width: "60%",
        cancelText: "取消",
        okText:'确定',
        loading: false,
        onOk: () => {
            this.modalOk();
        },
        onCancel: () => {
            this.closeModal();
        },
    };

    formOption: any = {
        labelCol: { style: { width: "120px" } },
        wrapperCol: { style: {width:'calc(100% - 120px)'}},
        layout: "horizontal",
        labelAlign: "right",
        hideRequiredMark: false,
        formData: {
            outDate: undefined,
            outNum: undefined,
            outNumber: undefined,
            outPy: undefined,
            outLoss: undefined,
        },
        rules: {
             outDate: [
                { required: true, message: "请选择出库时间" },
            ],
             outNum: [
                { required: true, message: "请输入出库件数" },
            ],
             outNumber: [
                { required: true, message: "请输入出库数量" },
            ],
        },
    };

    outboundDetailColumns: any[] = [
        {
            title: '',
            dataIndex: 'outDate',
            key: 'outDate',
            align: 'center',
        },
        {
            title: '',
            dataIndex: 'outNum',
            key: 'outNum',
            align: 'center',
        },
        {
            title: '实时结存件数(件)',
            dataIndex: 'nowStorageNum',
            key: 'nowStorageNum',
            align: 'center',
            customRender:(text,record,index)=>{
                if(record.operateType == 1){
                    return this.$createElement('span',{
                        style:{
                            color:"red"
                        },
                    },'-'+text)
                }else{
                    return this.$createElement('span',{
                        style:{
                            color:"green"
                        },
                    },'+'+text)
                }
            }
        },
        {
            title: '',
            dataIndex: 'outNumber',
            key: 'outNumber',
            align: 'center',
        },
        {
            title: '操作类型',
            dataIndex: 'operateType',
            key: 'operateType',
            align: 'center',
            customRender:(text)=>{
                console.log(text);
                
                return text == 1 ? '出库':'退库'
            }
        },
        {
            title: '实时结存数量(kg)',
            dataIndex: 'nowStorageNumber',
            key: 'nowStorageNumber',
            align: 'center',
        },
        {
            title: '盘盈',
            dataIndex: 'outPy',
            key: 'outPy',
            align: 'center',
        },
        {
            title: '报损',
            dataIndex: 'outLoss',
            key: 'outLoss',
            align: 'center',
        },
    ];

    outboundDetailData: any[] = [
        // 可以在这里添加模拟数据或者实际的出库明细数据
    ];

    @Watch('visible')
    visbleChnage(val:boolean){
        if(val && this.editId){
            this.getInfoById()
            this.outboundDetailColumns[0].title = `时间`
            this.outboundDetailColumns[1].title = `件数(件)`
            this.outboundDetailColumns[3].title = `数量(kg)`
        }
    }
    async getInfoById(){
        const res = await nextApi.getOutStorageData({medicinalStockId:this.editId})
        if(res.data){
            this.formOption.formData = {
            ...res.data
        }
            this.outboundDetailData = res?.data?.detailList || []
        }

    }
    modalOk() {
        (this.$refs.formModel as any).validate(async (valid: boolean) => {
            if (valid) {
                this.modalOption.loading = true;
                try {
                    //由于是绑定外面表格数据所以要传id
                    if(this.editId){
                        this.formOption.formData.medicinalStockId = this.editId
                        this.formOption.formData.operateType = this.operateType
                        const res = await nextApi.addOutStorageData(this.formOption.formData)
                        this.$message.success(res.msg)
                        this.$emit("closeModal")
                    }
                }finally {
                    this.modalOption.loading = false;
                }
                
            }
        });
    }

    closeModal() {
        // Reset form data and emit close event
        this.formOption.formData = {
             outDate: undefined,
            outNum: undefined,
            outNumber: undefined,
            outPy: undefined,
            outLoss: undefined,
        };
        this.$emit("closeModal");
    }
}
</script>
<style scoped lang="scss">
.container {
    padding: 20px;
    .ant-form-item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 24px;
    }
    .ant-form-item-label {
        text-align: right;
        padding-right: 8px;
    }
    .ant-form-item-control {
        text-align: left;
    }
}
h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}
</style> 